.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;

  & header {
    position: relative;
    display: flex;
    width: 100%;
    height: 45px;
    padding-left: 32px;
    justify-content: space-between;
    align-items: center;
    -webkit-app-region: drag;
  }

  & header i {
    position: absolute;
    top: 50%;
    right: calc(32px + 17px);
    display: block;
    font-size: 24px;
    color: #000;
    cursor: pointer;
    transform: translateY(-50%) rotate(90deg);
    -webkit-app-region: no-drag;
    padding: 8px;
  }

  & header i:hover {
    color: #07c160;
  }

  & .signature,
  & .times {
    -webkit-app-region: no-drag;
    font-size: 12px;
    color: #9b9b9b;
  }
  & p {
    margin: 0;
    padding: 0;
    margin-bottom: 6px;
    font-family: "Helvetica";
    font-size: 15px;
    color: rgba(74, 74, 74, 0.9);
  }

  & .signature,
  & header p {
    display: block;
    max-width: calc(100vw - 300px - 60px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    font-family: "SimHei";
  }
}

.container.hideConversation {
  & .signature,
  & header p {
    max-width: calc(100vw - 60px);
  }
}

.noselected {
  position: relative;
  display: flex;
  height: 80%;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: scale(0.7);

  & img {
    width: 200px;
    margin-bottom: 5vh;
  }

  & h1 {
    font-family: "Roboto";
    font-weight: 100;
    color: rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
    word-spacing: 4px;
  }
}

.messages {
  width: 100%;
  height: calc(100vh - 260px); /*Height - Header - Footer - Subtitle - Padding top */
  padding-top: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 1px solid #e7e7e7;

  & :global(.qqemoji) {
    transform: translateY(3px);
  }
}

.message {
  max-width: calc(100% - 120px);
  padding: 0 34px;
  margin-bottom: 20px;

  & .content :hover {
    opacity: 0.7;
  }

  & .content {
    border-radius: 4px;
    opacity: 1;
    width: fit-content;
  }
  & > div {
    position: relative;
    display: inline-block;
    padding: 16px 0 0 16px;
  }

  & .avatar {
    position: absolute;
    top: 15px;
    left: 0;
    height: 32px;
    width: 32px;
    border-radius: 0;
    z-index: 9;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
  }

  & p {
    user-select: initial;
  }

  & img + p.username {
    position: absolute;
    top: 0;
    left: 0;
    height: 32px;
    line-height: 32px;
    padding: 0 12px;
    margin-top: -10px;
    border-radius: 1px;
    white-space: nowrap;
    transition: 0.15s cubic-bezier(0, 0, 0.2, 1);
    transform: translateX(32px) scale(0.8);
    z-index: 99;
    opacity: 0;
  }

  &:not(.isme) img + p.username {
    opacity: 1;
  }
}

.message.system {
  color: #777;
  font-size: 11px;
  text-align: center;

  & a {
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    transition: 0.2s;
  }

  & a:hover {
    border-bottom-color: #777;
  }
}

.message.isText {
  & > div > div {
    max-width: 90%;
  }
  & .content {
    white-space: pre-wrap;
    position: relative;
    max-width: 100%;
    background: #fff;
    box-shadow: 0 6px 28px 0 rgba(230, 230, 230, 100);
    border-radius: 4px;
    left: 26px;
  }
  & .content::after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    line-height: 0px;
    border-bottom: 5px solid #f5f5f5;
    border-left: 6px solid #fff;
    border-top: 5px solid #f5f5f5;
    left: -6px;
    top: 11px;
    transform: scale(-1);
  }
  & p {
    min-width: 47px;
    margin: 0;
    padding: 10.82px 14.8px 8px 15px;
    font-family: "Helvetica";
    font-size: 14px;
    color: #777;
    line-height: 22.65px;
    user-select: text;
    word-break: break-all;
  }

  & .times {
    margin-left: 40px;
    margin-bottom: 6px;
    display: inline-block;
    font-size: 12px !important;
    color: #f65431 !important;
  }

  & :global(.face) {
    zoom: 0.8;
    margin: 0 2px;
    transform: translateY(-6px);
  }
}
.message.isVoip {
  & .content {
    position: relative;
    max-width: 100%;
    background: #fff;
    box-shadow: 0 6px 28px 0 rgba(230, 230, 230, 100);
    border-radius: 4px;
    left: 26px;
    padding: 0 13px;
    line-height: 30px;
  }
  & .content::after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    line-height: 0px;
    border-bottom: 5px solid #f5f5f5;
    border-left: 6px solid #fff;
    border-top: 5px solid #f5f5f5;
    left: -6px;
    top: 11px;
    transform: scale(-1);
  }
}
.message.isme.isVoip {
    & > div {
      display: flex;
      justify-content: flex-end;
    }
    & .avatar {
      left: auto;
      right: -16px;
    }
    & .content {
      max-width: 100%;
      box-shadow: 0 6px 28px 0 rgba(230, 230, 230, 100);
      border-radius: 4px;
      left: auto;
      right: 25px;
      padding: 0 13px;
      line-height: 30px;
    }
    & .content::after{
          content: "";
          position: absolute;
          width: 0px;
          height: 0px;
          line-height: 0px;
          border-bottom: 5px solid #f5f5f5;
          border-left: 6px solid #fff;
          border-top: 5px solid #f5f5f5;
          left: auto;
          right: -6px;
          top: 11px;
          transform: scale(1);
    }
}
.message.isEmoji {
  & > div {
    padding: 16px 0 0 47px;
  }

  & .content img {
    max-width: 60%;
    max-height: 250px;
  }
}

.message.isImage {
  & img {
    max-width: 60%;
    cursor: pointer;
  }

  & > div {
    padding: 16px 0 0 47px;
  }

  /* stylelint-disable */
  & :global(.open-image) {
    box-shadow: 0 6px 28px 0 rgba(230, 230, 230, 100);
  }
  /* stylelint-enable */
}

.message.isContact {
  & > div {
    position: relative;
    padding: 16px 0 0 47px;
  }

  & .contact {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 8px 14px;
    padding-right: 32px;
    background: #fff;
    box-shadow: 0 6px 28px 0 rgba(230, 230, 230, 100);
  }

  & .contact img {
    height: 48px;
    width: 48px;
    margin-right: 24px;
    pointer-events: none;
  }

  & .contact > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
  }

  & .contact p {
    margin: 0;
  }

  & .contact p:last-child {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
  }

  & i {
    position: absolute;
    top: 50%;
    right: -16px;
    height: 32px;
    width: 32px;
    border-radius: 100%;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    background: #e1306c;
    box-shadow: 0 0 24px 0 rgba(119, 119, 119, 0.5);
    cursor: pointer;
    color: #fff;
    transform: translateY(-50%);
  }

  /* stylelint-disable */
  & :global(.is-friend) {
    cursor: pointer;
  }
  /* stylelint-enable */
}

.message.isLocation {
  & img {
    cursor: pointer;
  }

  & p {
    position: relative;
    height: 200px;
    overflow: hidden;
    box-shadow: 0 6px 28px 0 rgba(230, 230, 230, 100);
  }

  & label {
    position: absolute;
    display: block;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 32px;
    color: #fff;
    line-height: 32px;
    text-indent: 16px;
    background: rgba(0, 0, 0, 0.7);
  }

  /* stylelint-disable */
  & :global(.open-map) {
    width: 100%;
    transform: translateY(-20%);
  }
  /* stylelint-enable */

  & > div {
    padding: 16px 16px 0 47px;
  }
}

.message.isVoice {
  position: relative;
  margin-bottom: 30px;

  & p {
    margin: 0;
  }

  & .content {
    left: 48px;
    top: 20px;
    display: flex;
    height: 32px;
    min-width: 120px;
    padding-left: 24px;
    padding-right: 14px;
    justify-content: space-between;
    align-items: center;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 6px 28px 0 rgba(230, 230, 230, 100);
  }

  & .times {
    white-space: nowrap;
  }

  & i + span {
    font-size: 12px;
    color: #797979;
    display: inline-block;
    margin-left: 14px;
    transform: translateY(-2px);
  }

  & audio {
    display: none;
  }

  & i {
    pointer-events: none;
  }

  & .playing i,
  & .playing span {
    color: #07c160 !important;
  }

  /* stylelint-disable */
  & :global(.play-voice) {
    cursor: pointer;
  }
  /* stylelint-enable */
}

.message.isVideo {
  & .content {
    position: relative;
    left:25px;
  }
  & video {
    max-width: 90%;
    height: auto;
    max-height: 500px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  }
}

.message.appMessage {
  font-family: "Roboto";

  & .content > p {
    font-family: "Roboto";
  }

  & .content > p > div {
    background: #00d995;
    box-shadow: 0 6px 28px 0 rgba(230, 230, 230, 100);
  }

  & p {
    color: #fff;
  }
}

.message.isTransfer {
  position: relative;

  & > div {
    position: relative;
    padding: 16px 0 0 47px;
  }

  & .transfer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
  }

  & .transfer span {
    display: block;
    padding: 8px 14px;
    font-size: 24px;
    color: #fff;
    border-bottom: 2px solid color(#00d995 blackness(40%));
  }

  & .transfer p {
    color: #fff;
    font-size: 12px;
    margin: 20px 20px 12px;
  }

  & h4 {
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
  }
}

.message.isLocationSharing {
  position: relative;

  & .locationSharing {
    margin-top: -16px;
    margin-left: 32px;
    display: flex;
    height: 32px;
    min-width: 120px;
    padding-left: 12px;
    padding-right: 14px;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #fff;
    border-radius: 1px;
    white-space: nowrap;
    box-shadow: 0 6px 28px 0 rgba(230, 230, 230, 1);
  }

  & .locationSharing i {
    margin-right: 6px;
  }

  & .times {
    margin-left: 32px;
  }
}

.message.isFile {
  & > div {
    position: relative;
    padding: 16px 0 0 47px;
  }

  & .file {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 8px 14px;
    padding-right: 32px;
    background: #fff;
    box-shadow: 0 6px 28px 0 rgba(230, 230, 230, 100);
    border-radius: 4px;
  }

  & .file img {
    height: 32px;
    width: 32px;
    margin: 8px 0;
    margin-right: 24px;
    pointer-events: none;
  }

  & .file > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
  }

  & .file p {
    margin: 0;
  }

  & .file p:last-child {
    font-size: 12px;
  }

  & i {
    position: absolute;
    top: 50%;
    right: -16px;
    height: 32px;
    width: 32px;
    border-radius: 100%;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    background: #e1306c;
    box-shadow: 0 0 24px 0 rgba(119, 119, 119, 0.5);
    cursor: pointer;
    color: #fff;
    transform: translateY(-50%);
  }

  & :global(i.icon-ion-android-more-horizontal) {
    background: #405de6;
  }
}
.message.isme {
  max-width: 100%;
  & .content {
    margin-left: auto;
  }
}
.message.isme.isText {
  & > div {
    display: flex;
    justify-content: flex-end;
  }

  & > div > div{
    max-width: 90%;
  }
  & .avatar {
    left: auto;
    right: -16px;
  }

  & .content {
    background: #9eea6a;
    border-radius: 4px;
    left: auto;
    right: 25px;
    max-width: 100%;
  }
  & .content::after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    line-height: 0px;
    border-bottom: 5px solid #f5f5f5;
    border-left: 6px solid #9eea6a;
    border-top: 5px solid #f5f5f5;
    left: auto;
    right: -6px;
    top: 11px;
    transform: scale(1);
  }

  & p {
    padding: 10.82px 15px 8px 14.8px;
    /* word-break:normal; */
    word-wrap: break-word;
    word-break: break-all;
  }

  & .times {
    margin-left: 14.8px;
  }

  & p,
  & .times {
    color: #232323;
  }
}

.message.isme.isVideo {
  text-align: right;
  & .content {
    position: relative;
    right: 25px;
    left: auto;
  }
  & > div {
    display: flex;
    justify-content: flex-end;
  }

  & .avatar {
    left: auto;
    right: -16px;
  }
}

.message.isme.isLocationSharing,
.message.isme.isTransfer,
.message.isme.isContact,
.message.isme.isLocation,
.message.isme.isVoice,
.message.isme.isEmoji,
.message.isme.isImage,
.message.isme.isFile {
  & > div {
    display: flex;
    padding: 16px 32px 0 0;
    justify-content: flex-end;
  }

  & .avatar {
    left: auto;
    right: -16px;
  }

  & .content {
    text-align: right;
  }
}

.message.isme.isVoice {
  & .content {
    left: auto;
    right: 32px;
  }
}

.message.isme.isLocation {
  & > div {
    padding: 16px 32px 0;
  }

  & p {
    float: right;
  }
}

.message.uploading {
  &.isEmoji i,
  &.isFile i,
  &.isVideo i,
  &.isImage i {
    position: absolute;
    top: 50%;
    right: 16px;
    height: 32px;
    width: 32px;
    border-radius: 100%;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    background: #3adcbe;
    box-shadow: 0 0 24px 0 rgba(119, 119, 119, 0.5);
    cursor: pointer;
    color: #fff;
    transform: translateY(-50%);
  }

  &.isVideo i,
  &.isFile i {
    right: -16px !important;
  }
}

.invalidEmoji {
  position: relative;
  margin-top: -30px;

  & > div {
    /* stylelint-disable */
    content: -webkit-image-set(
      url()
        1x,
      url()
        2x
    );
    /* stylelint-enable */
  }

  & > span {
    position: absolute;
    display: block;
    left: 46px;
    bottom: 0;
    white-space: nowrap;
    color: #535353;
  }
}

.tips {
  position: absolute;
  height: 32px;
  left: 14px;
  bottom: 0;
  padding: 0 16px;
  line-height: 32px;
  font-size: 14px;
  background: color(#616161 -alpha(10%));
  border-radius: 1px;
  opacity: 0;
  transform-origin: center bottom;
  transition: 0.15s cubic-bezier(0, 0, 0.2, 1);
  pointer-events: none;
  z-index: 99;
}

.tips.show {
  opacity: 1;
  bottom: 24px;
}

@media (width <= 800px) {
  .container {
    & header {
      height: 46px;
      padding-left: 24px;
    }

    & header i {
      right: calc(32px + 17px);
      font-size: 18px;
    }

    & .signature,
    & .times {
      font-size: 11px;
    }

    & .signature,
    & header p {
      max-width: calc(100vw - 280px - 60px);
    }

    & p {
      margin-bottom: 2px;
      font-size: 12px;
    }
  }

  .noselected img {
    width: 160px;
    margin-bottom: 5vh;
  }

  .messages {
    height: calc(100vh - 184px - 40px - 12px);
    padding-top: 12px;

    & :global(.qqemoji) {
      transform: translateY(-1px);
    }
  }

  .message {
    max-width: calc(100% - 24px - 36px);
    padding: 0 24px;
    margin-bottom: 14px;

    & > div {
      position: relative;
      display: inline-block;
      padding: 12px 0 0 12px;
    }

    & .avatar {
      height: 24px;
      width: 24px;
    }

    & img + p.username {
      height: 24px;
      line-height: 24px;
      padding: 0 9px;
      font-size: 12px;
      transform: translateX(24px) scale(0.8);
    }

    &:not(.isme) img:hover + p.username {
      transform: translateX(36px) scale(1);
    }
  }

  .message.isText {
    & > div > div{
      max-width: 90%;
    }
    & .content {
      border-radius: 5px;
      left: 26px;
    }
    & .content::after {
      content: "";
      position: absolute;
      width: 0px;
      height: 0px;
      line-height: 0px;
      border-bottom: 4px solid #f5f5f5;
      border-left: 5px solid #fff;
      border-top: 4px solid #f5f5f5;
      left: -4px;
      top: 11px;
      transform: scale(-1);
    }
    & p {
      white-space: pre-wrap;
      min-width: 37px;
      padding: 8.32px 11.3px 6px 11.3px;
      font-size: 13px;
      word-break: normal;
      line-height: 16px;
    }

    & .times {
      margin-left: 26px;
      margin-bottom: 4px;
    }

    & :global(.face) {
      zoom: 0.7 !important;
      margin: 0 1px !important;
      transform: translateY(-7px) !important;
    }
  }

  .message.isEmoji {
    & > div {
      padding: 12px 0 0 36px;
    }
  }

  .message.isImage {
    & > div {
      padding: 12px 0 0 36px;
    }
  }

  .message.isContact {
    & > div {
      padding: 12px 0 0 36px;
    }

    & .contact {
      padding: 6px 12px;
      padding-right: 32px;
    }

    & .contact img {
      height: 36px;
      width: 36px;
      margin-right: 18px;
    }

    & .contact p:last-child {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.5);
    }

    & i {
      right: -12px;
      height: 24px;
      width: 24px;
      line-height: 24px;
      font-size: 12px;
    }
  }

  .message.isLocation {
    & p {
      width: 90%;
      height: 200px;
    }

    & p img {
      width: 80%;
    }

    & label {
      height: 24px;
      line-height: 24px;
      text-indent: 12px;
      font-size: 12px;
    }

    & > div {
      padding: 12px 0 0 36px;
    }
  }

  .message.isVoice {
    & .content {
      left: 36px;
      height: 24px;
      padding-left: 14px;
      padding-right: 12px;
    }

    & i + span {
      margin-left: 8px;
      transform: translateY(-1px);
    }
  }

  .message.isVideo {
    & video {
      max-width: 100%;
    }
  }

  .message.isFile {
    & > div {
      padding: 12px 0 0 36px;
    }

    & .file {
      padding: 6px 12px;
    }

    & .file img {
      height: 24px;
      width: 24px;
      margin: 6px 0;
      margin-right: 12px;
    }

    & .file p:last-child {
      font-size: 11px;
    }

    & i {
      right: -12px;
      height: 24px;
      width: 24px;
      line-height: 24px;
      font-size: 12px;
    }
  }

  .message.isLocationSharing {
    & .locationSharing {
      margin-top: -12px;
      margin-left: 24px;
      height: 24px;
      padding-left: 12px;
      padding-right: 14px;
      font-size: 12px;
    }

    & .locationSharing i {
      margin-right: 6px;
    }

    & .times {
      margin-left: 32px;
    }
  }

  .message.isTransfer {
    & > div {
      padding: 12px 0 0 36px;
    }

    & .transfer {
      padding: 6px 12px;
    }

    & .transfer span {
      padding: 6px 12px;
      font-size: 18px;
    }

    & .transfer p {
      font-size: 12px;
      margin: 15px 15px 8px;
    }

    & h4 {
      font-size: 14px;
    }
  }

  .message.uploading {
    &.isEmoji i,
    &.isFile i,
    &.isVideo i,
    &.isImage i {
      right: 12px;
      height: 24px;
      width: 24px;
      line-height: 24px;
      font-size: 12px;
    }

    &.isVideo i,
    &.isFile i {
      right: -12px !important;
    }
  }

  .message.isme.isText {
    & > div > div{
        max-width: 90%;
      }
    & .content {
      background: #9eea6a;
      border-radius: 7px;
      left: auto;
      right: 25px;
      max-width: 100%;
    }
    & .content::after {
      content: "";
      position: absolute;
      width: 0px;
      height: 0px;
      line-height: 0px;
      border-bottom: 4px solid #f5f5f5;
      border-left: 5px solid #9eea6a;
      border-top: 4px solid #f5f5f5;
      left: auto;
      right: -4px;
      top: 11px;
      transform: scale(1);
    }

    & p {
      padding: 8.32px 11.3px 6px 11.3px;
      /* word-break:normal; */
      word-wrap: break-word;
      word-break: break-all;
    }
    & .avatar {
      right: -12px;
    }

    /* & p {
            padding: 8.32px 30px 6px 11.3px;
            word-break:normal;
        } */

    & .times {
      margin-left: 11.3px;
    }
  }

  .message.isme.isVideo {
    & .avatar {
      right: -12px;
    }
  }

  .message.isme.isLocationSharing,
  .message.isme.isTransfer,
  .message.isme.isContact,
  .message.isme.isLocation,
  .message.isme.isVoice,
  .message.isme.isEmoji,
  .message.isme.isImage,
  .message.isme.isFile {
    & > div {
      padding: 12px 24px 0 0;
    }

    & .avatar {
      left: auto;
      right: -12px;
    }
  }

  .message.isme.isVoice {
    & .content {
      left: auto;
      right: 24px;
    }
  }

  .message.isme.isLocation {
    & > div {
      padding: 12px 24px 0;
    }

    & .avatar {
      right: 0;
    }

    & p {
      width: 100%;
      text-align: left;
    }
  }

  .tips {
    height: 24px;
    padding: 0 12px;
    line-height: 24px;
    font-size: 12px;
  }

  .tips.show {
    opacity: 1;
    bottom: 12px;
  }
}
